<template>
	<view class="out">
		<input type="text" v-model="fastname" placeholder="请输入姓..."/>
		<input type="text" v-model="lastname" placeholder="请输入名..."/>
	</view>
	<view>全名(computed)：{{allname}}</view>
	<view>全名(computed)：{{allname}}</view>
	<button type="default" @click="obj.age++">年龄+1</button>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue';
	const fastname = ref('');
	const lastname = ref('');
	const obj = ref({
		name:"张三",
		age:18
	})
	/*
	计算属性
	*/
	const allname = computed(()=>{
		return fastname.value + "--" + lastname.value
	})
	/*
	监听响应式属性
	*/
	watch(fastname,(newvalue,oldvalue)=>{
		console.log("gh",newvalue,oldvalue);
	})
	/*
	监听多个响应式属性
	*/
	watch([fastname,lastname],([fnew,fold],[lnew,lold])=>{
		console.log([fnew,fold],[lnew,lold]);
	})
	/*
	监听对象的属性  深度监听
	*/
	watch(()=>obj.value.age,(newv,oldv)=>{
		console.log('age',newv,oldv);
	})
	/*
	监听对象  深度监听
	deep:true 开启深度
	immediate:true 开启立即执行
	*/
	watch(obj,(newv,oldv)=>{
		console.log("深度监听",newv,oldv);
	},{deep:true,immediate:true})
	/*
	自动监听到回调函数中使用的响应式变量
	*/
	watchEffect(()=>{
		console.log("watchEffect",obj.value.age,fastname.value);
	})	
		
</script>

<style lang="scss" scoped>
	.out {
		margin: 20px 0;
		padding: 0 20px;
		input {
			border: 1px solid #ccc;
			margin: 20px 0;
			padding: 0 20px;
		}
	}       
</style>
